<template>
  <view class="normal-login-container">
    <view class="login-form-content">
      <view class="input-item">
        <view class="input-label font-34">设备名称</view>
        <input
          class="input"
          type="text"
          v-model="searchObj.name"
          placeholder="请输入设备名称"
          maxlength="30"
        />
      </view>
      <view class="input-item">
        <view class="input-label font-34">型号</view>
        <picker
          @change="
            bindPickerChange($event, 'indexoOne', 'modelNum', 'ModelNumberList')
          "
          :value="indexoOne"
          :range="ModelNumberList"
          range-key="title"
        >
          <view class="uni-input">{{
            ModelNumberList[indexoOne] && ModelNumberList[indexoOne].title
          }}</view>
        </picker>
      </view>
      <view class="input-item">
        <view class="input-label font-34">品牌</view>
        <picker
          @change="bindPickerChange($event, 'indexTwo', 'brand', 'brandList')"
          :value="indexTwo"
          :range="brandList"
          range-key="name"
        >
          <view class="uni-input">{{
            brandList[indexTwo] && brandList[indexTwo].name
          }}</view>
        </picker>
      </view>
      <view class="input-item">
        <view class="input-label font-34">设备仓库</view>
        <picker
          @change="
            bindPickerChange($event, 'indexThree', 'warehouse', 'warehouseList')
          "
          :value="indexThree"
          :range="warehouseList"
          range-key="name"
        >
          <view class="uni-input">{{
            warehouseList[indexThree] && warehouseList[indexThree].name
          }}</view>
        </picker>
      </view>
      <view class="input-item">
        <view class="input-label font-34">入库开始时间</view>
        <u-datetime-picker
          :show="startShow"
          v-model="searchObj.startTime"
          mode="date"
          @confirm="startShow = false"
          @cancel="startShow = false"
          :maxDate="searchObj.endTime"
        ></u-datetime-picker>
        <view class="flex justify-between">
          <text @click="startShow = true">
            {{
              searchObj.startTime
                ? timeFormat(searchObj.startTime, "yyyy年mm月dd日")
                : "请选择入库开始时间"
            }}
          </text>
          <u-icon
            @click="searchObj.startTime = null"
            v-if="searchObj.startTime"
            name="close"
            size="20"
          ></u-icon>
        </view>
      </view>
      <view class="input-item">
        <view class="input-label font-34">入库结束时间</view>
        <u-datetime-picker
          :show="endShow"
          v-model="searchObj.endTime"
          mode="date"
          :minDate="searchObj.startTime"
          @confirm="endShow = false"
          @cancel="endShow = false"
        ></u-datetime-picker>
        <view class="flex justify-between">
          <text @click="endShow = true">{{
            searchObj.endTime
              ? timeFormat(searchObj.endTime, "yyyy年mm月dd日")
              : "请选择入库结束时间"
          }}</text>

          <u-icon
            v-if="searchObj.endTime"
            @click="searchObj.endTime = null"
            name="close"
            size="20"
          ></u-icon>
        </view>
      </view>
      <view class="action-btn">
        <button
          class="cu-btn block bg-blue lg round"
          @click="jump('/pages/searchResult/index')"
        >
          查找
        </button>
      </view>
    </view>
  </view>
</template>
  
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      searchObj: {
        name: "",
        modelNum: null,
        brand: null,
        warehouse: null,
        startTime: 0,
        endTime: new Date() - 0,
      },
      indexoOne: 0,
      indexTwo: 0,
      indexThree: 0,
      timeFormat: uni.$u.timeFormat,
      startShow: false,
      endShow: false,
    };
  },
  created() {},
  computed: {
    ...mapState("search", ["warehouseList", "brandList", "ModelNumberList"]),
  },
  methods: {
    ...mapMutations("search", ["CHANGE_FILTER"]),
    bindPickerChange: function (e, index, key, allList) {
      this.searchObj[key] = this[allList][e.detail.value];
      this[index] = e.detail.value;
    },
    jump(url) {
      this.CHANGE_FILTER(this.searchObj);
      this.$tab.navigateTo(url);
    },
  },
};
</script>
  
<style lang="scss">
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  padding: 5%;
  font-weight: 700;
  padding-bottom: calc(80upx + 5%);
  .login-form-content {
    .input-item {
      margin-bottom: 14upx;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .input-label {
        margin-bottom: 20px;
      }
      .input {
        width: 100%;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        text-align: left;
      }
    }
  }
  .loginBottom {
    justify-content: space-between;
    padding: 30upx 0;
    font-weight: 400;
  }
  .action-btn {
    padding: 0 5% 5%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
  